<template>
  <div id="sellingOrder">
    <div class="selling-box">
      <Row>
        <Col span="21">
          <div class="selling-box-title">民润便利店管理系统</div>
        </Col>
        <!--        <Col span="3">-->
        <!--          <div class="server"><span>订单列表</span></div>-->
        <!--        </Col>-->
        <Col span="3">
          <div class="server"><a class="link-a" href="#" @click="toServer" style="color: #FFF;">管理后台</a></div>
          <!--          <div class="server"><a href="#" @click="toServer"> <span @click="toServer">进入后台</span></a></div>-->
        </Col>
      </Row>
      <Row>
        <Col class="c1">订单编号：</Col>
        <Col class="v1">{{ orderNo }}</Col>
        <Col class="c1">创建日期：</Col>
        <Col class="v1">2023年01月26日</Col>
        <Col class="c1"></Col>
        <Col class="v1"></Col>
      </Row>
      <Row>
        <Col class="c1">商品总类：</Col>
        <Col class="v1">{{ typeCount }}</Col>
        <Col class="c1">商品总数：</Col>
        <Col class="v1">{{ totalCount }}</Col>
        <Col class="c1">订单总额：</Col>
        <Col class="v1">{{ (orderMoney / 100) }}元</Col>
      </Row>
    </div>
    <Row class="selling-content">
      <Col style="width: 1vw;background-color: #1ec2a4"></Col>
      <Col>
        <div class="order-list">
          <div class="sum-goods-box">
            <table class="order-list-table">
              <thead>
              <tr class="order-list-tr order-list-item">
                <th class="order-list-th order-list-item">序号</th>
                <th class="order-list-th order-list-item">图片</th>
                <th class="order-list-th-name order-list-item">商品名称</th>
                <th class="order-list-th order-list-item">单价</th>
                <th class="order-list-th-count order-list-item">数量</th>
                <th class="order-list-th order-list-item">总价</th>
                <th class="order-list-th order-list-item">操作</th>
              </tr>
              </thead>
              <tbody class="order-list-body">
              <tr class="order-list-tr  order-list-item" v-for="(item,index) in orderGoodses.slice().reverse()"
                  :key="item.name">
                <td class="order-list-td order-list-item">{{ orderGoodses.length - index }}</td>
                <td class="order-list-td order-list-item"><img @click="showBigImage(index)"
                                                               style="width: 100%;height: 100%;"
                                                               :src="'http://127.0.0.1:8001/'+item.goodsImgUrls"/></td>
                <td class="order-list-td-name order-list-item">{{ item.goodsName }}</td>
                <td class="order-list-td order-list-item">{{ (item.goodsSellingPriceCustom / 100) }}</td>
                <td class="order-list-td-count order-list-item">
                  <button class="order-item-btn-add" type="button" @click="plus(index)">+</button>
                  {{ item.goodsCount }}
                  <button class="order-item-btn-sub" type="button" @click="reduce(index)"
                  >-
                    <!--                          :disabled="item.goodsCount<=1"-->
                  </button>
                </td>
                <td class="order-list-td order-list-item">
                  {{ (item.goodsSumPrice / 100) || ((item.goodsSellingPriceCustom / 100) * item.goodsCount) }}
                </td>
                <td class="order-list-td order-list-item">
                  <button type="button" @click="cut(index)">删除</button>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </Col>

      <Col style="width: 1vw;background-color: #1ec2a4"></Col>
      <Col>
        <div class="goods-info">
          <div v-show="typeFilters.length!=0" class="tool-bar">
            <button class="tool-bar-item back-btn" @click="back()">《返回</button>
            <div class="tool-bar-item type-filter-name" v-for="(item, index) in typeFilters"
                 :key="'type_filter_name_'+index"><span>{{ item.typeName }}》</span></div>
            <div class=" goods-research">搜索</div>
          </div>
          <div class="type-list" :class="typeFilters.length!=0?'tree-type-list':'full-type-list'"
               style="background: white;">
            <div v-show="goodsList.length==0" class="type-list-item" v-for="(item, index) in goodsTypes"
                 :key="'type_item_'+index"
                 v-proportion="1.15" @click="typeFilter(index)">
              <img class="type-list-item-img" :src="'http://127.0.0.1:8001/'+ item.typeImgUrls" v-proportion="1">
              <span>{{ item.typeName }}</span>
            </div>
            <div v-show="goodsList.length!=0" class="type-list-item" v-for="(item, index) in goodsList"
                 :key="'goods_item_'+index"
                 v-proportion="1.15" @click="addOrderGoods(index)">
              <img class="type-list-item-img" :src="'http://127.0.0.1:8001/'+ item.goodsImgUrls" v-proportion="1">
              <span>{{ item.goodsName }}</span>
            </div>
          </div>
          <div style="height: 12%;background: rgb(98 126 151);">
            <button class="order-btn" @click="pay">结账</button>
            <button class="order-btn" @click="saveOrder">暂存</button>
            <button class="order-btn">条件查找</button>
            <button class="order-btn">历史订单</button>
          </div>
        </div>
      </Col>
      <Col style="width: 1vw;background-color: #1ec2a4">
      </Col>
    </Row>
    <div class="selling-footer"></div>
    <!--    显示放大图片的组件-->
    <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg>
    <Pay :visible="payVisible" :order-data="this.getOrderData()" @closeClick="()=>{payVisible=false}"
         @paySuccess="paySuccess"></Pay>
  </div>
</template>

<script>
import Vue from 'vue'
import {mapActions} from 'vuex'
import proportion from 'vue-proportion-directive';
import BigImg from "@/views/Utils/bigImg.vue";
import Pay from "@/views/SellingOrder/pay.vue";

Vue.use(proportion);
export default {
  name: "sellingOrder",
  components: {
    BigImg,
    Pay
  },
  mounted() {
    this.refresh()
  },
  methods: {
    getOrderData() {
      return {
        sellingOrderGoodsList: this.getData(),
        totalCount: this.totalCount,
        orderMoney: this.orderMoney,
        orderNo: this.orderNo
      }
    },
    getData() {
      return this.orderGoodses.map(item => {
        return {
          'goodsInDTO': {
            'id': item.id,
            'goodsBarcode': item.goodsBarcode,
            'goodsQrcode': item.goodsQrcode,
            'goodsName': item.goodsName,
            'goodsImgUrls': item.goodsImgUrls,
            'goodsSellingPriceCustom': item.goodsSellingPriceCustom,
          },
          'goodsCount': item.goodsCount,
          'goodsBalancePrice': item.goodsBalancePrice,
          'goodsBalancePriceAll': item.goodsBalancePriceAll
        }
      })
    },
    paySuccess() {
      this.refresh();
    },
    refresh() {
      this.typeFilters = []
      this.orderGoodses = []
      this.goodsList = []
      this._getGoodsTypes()
      this._getOrderNo()
    },
    saveOrder() {
      if (this.orderGoodses.length > 0) {
        this._saveOrder();
        this.refresh()
      } else {
        this.$warningMessage('无暂存信息！！！')
      }
    },
    // 获取商品类型
    async _getGoodsTypes(parentId) {
      var url = '/goodsType/list'
      if (parentId) {
        url = url + '?s_typeParentId=' + parentId
      } else {
        url = url + '?s_typeLevel=' + 1
      }
      const res = await this.GET_DATA({
        dataUrl: url
      });
      if (res) {
        this.$nextTick(() => {
          this.goodsTypes = res.data
          //查询商品
          if (this.goodsTypes.length == 0) {
            this._getGoodsList(parentId);
          }
        })
      }
    },
    _saveOrder() {
      const url = '/sellingOrder/add'
      const res = this.POST_DATA({
        dataUrl: url,
        sellingOrderGoodsList: this.getData(),
        orderMoney: this.orderMoney,
        orderNo: this.orderNo
      })
      if (res) {
        this.$nextTick(() => {
          this.$successMessage('暂存成功')
        })
        // }else{

      }
    },
    async _getOrderNo() {
      const url = '/sellingOrder/orderNo'
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          // this.orderNo = 'DD2023021410471764950'
          this.orderNo = res.data
        })
      }
    },
    async _getGoodsList(parentId) {
      var url = '/goods/list'
      if (parentId) {
        url = url + '?s_typeId=' + parentId
      }
      const res = await this.GET_DATA({
        dataUrl: url
      })
      if (res) {
        this.$nextTick(() => {
          this.goodsList = res.data
        })
      }
    },
    toServer() {
      this.$router.push({name: 'home'})
    },
    showBigImage(index) {//点击图片函数，点击后，把photoVisible设置成true
      // if (e != "") {
      this.photoVisible = true;
      this.bigImgUrl = this.orderGoodses[index].goodsImgUrls;
      // }
    },
    pay() {
      if (this.orderGoodses.length > 0) {
        this.payVisible = true;
      } else {
        this.$warningMessage('无结账信息！！！')

      }
    },
    plus(indexIn) {
      let length = this.orderGoodses.length;
      let index = length - indexIn - 1;

      this.orderGoodses[index].goodsCount++;
      this.orderGoodses[index].goodsSumPrice = this.orderGoodses[index].goodsSellingPriceCustom * this.orderGoodses[index].goodsCount;
      Vue.set(this.orderGoodses, index, this.orderGoodses[index])
      // this.$forceUpdate();
    },
    reduce(indexIn) {
      let length = this.orderGoodses.length;
      let index = length - indexIn - 1;
      if (this.orderGoodses[index].goodsCount <= 1) {
        let res = confirm('是否移除该商品？');
        if (res == true) {
          this.orderGoodses.splice(index, 1)
        }
      } else {
        this.orderGoodses[index].goodsCount--;
        this.orderGoodses[index].goodsSumPrice = this.orderGoodses[index].goodsSellingPriceCustom * this.orderGoodses[index].goodsCount;
        Vue.set(this.orderGoodses, index, this.orderGoodses[index])
      }
      // this.$forceUpdate();
    },
    cut(indexIn) {
      let length = this.orderGoodses.length;
      let index = length - indexIn - 1;

      let res = confirm('是否移除该商品？');
      if (res == true) {
        this.orderGoodses.splice(index, 1)
      }
    },
    addOrderGoods(index) {
      let goodsListElement = this.goodsList[index];
      // let goodsListElement = this.goodsList.slice(index, index + 1)[0];
      let number;
      //根据商品二维码定位商品
      let goodsBarcode = goodsListElement.goodsBarcode;
      for (let i = 0; i < this.orderGoodses.length; i++) {
        if (this.orderGoodses[i].goodsBarcode == goodsBarcode) {
          number = i;
          break;
        }
      }
      // number = this.orderGoodses.indexOf(goodsListElement);
      if (number >= 0) {
        this.plus(this.orderGoodses.length - number - 1)
        // this.$forceUpdate();
      } else {
        goodsListElement.goodsCount = 1;
        goodsListElement.goodsSumPrice = goodsListElement.goodsSellingPriceCustom * goodsListElement.goodsCount
        this.orderGoodses.push(goodsListElement);
      }
    },
    typeFilter(index) {
      let goodsType = this.goodsTypes[index];
      let typeId = goodsType.id;
      let typeName = goodsType.typeName;
      this.typeFilters.push({'typeId': typeId, 'typeName': typeName});
      this._getGoodsTypes(typeId)
    },
    back() {
      this.typeFilters.pop();
      let parentId;
      let length = this.typeFilters.length;
      if (length > 0) {
        parentId = this.typeFilters[length - 1].typeId;
      }
      this.goodsList = []
      this._getGoodsTypes(parentId)
    },
    // length += height / frequency;
    // document.documentElement.scrollTop = length;
    ...mapActions({
      GET_DATA: '_GET_DATA',
      POST_DATA: '_POST_DATA'
    })
  },
  data() {
    return {
      orderNo: "",
      typeFilters: [],
      photoVisible: false,
      payVisible: false,
      goodsList: [],
      bigImgUrl: "",
      goodsTypes: [],
      orderGoodses: [{
        'goodsName': '测试商品1',
        'goodsImgUrls': '1.jpg',
        'goodsCount': 11,
        'goodsSellingPriceCustom': 2,
        'goodsSumPrice': 0
      },
        {
          'goodsName': '测试商品3',
          'goodsImgUrls': '8.jpg',
          'goodsCount': 33,
          'goodsSellingPriceCustom': 4,
          'goodsSumPrice': 0
        }],   // 商品库存
    }
  },
  computed: {
    orderMoney() {
      return this.orderGoodses.reduce((currentTotal, item) => {
        return currentTotal + item.goodsSellingPriceCustom * item.goodsCount
      }, 0)
    },
    totalCount() {
      return this.orderGoodses.reduce((currentTotal, item) => {
        return currentTotal + item.goodsCount
      }, 0)
    },
    typeCount() {
      return this.orderGoodses.reduce((currentTotal) => {
        return ++currentTotal
      }, 0)
    }
  }
}
</script>

<style land="scss" scoped>
.selling-content {
  width: 100vw;
}

.selling-box {
  height: 20vh;
  padding: 0 2vw;
  background-color: #1ec2a4;
  color: #fff;
  width: 100vw;
}

.selling-box-title {
  font-size: 38px;
  font-weight: bold;
  line-height: 60px;
}

.server {
  margin-top: 5px;
  float: right;
  font-size: 16px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  /* line-height: 80px; */
}

.c1 {
  font-size: 1.1vw;
  width: 6vw;
  text-align: right;
  margin-top: 1vh;
}

.v1 {
  font-size: 1.1vw;
  width: 20vw;
  text-align: left;
  margin-top: 1vh;
}

.order-list {
  height: 75vh;
  width: 39vw;
  background-color: #ffffff;
  position: relative;
}

.order-list-table {
  width: 100%;
  border-collapse: collapse;
}

.order-list-tr {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.order-list-th {

  border-top: 1px solid #828282;
  border-bottom: 1px solid #828282;
  width: 45px;
  background-color: #fffdce;
}

.order-list-th-name {

  border-top: 1px solid #828282;
  border-bottom: 1px solid #828282;
  background-color: #fffdce;
  width: 222px;
}

.order-list-th-count {

  border-top: 1px solid #828282;
  border-bottom: 1px solid #828282;
  width: 85px;
  background-color: #fffdce;
}

.order-list-td {
  text-align: center;
  width: 45px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.order-list-td-name {
  text-align: center;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.order-list-td-count {
  text-align: center;
  width: 91px;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}

.order-item-btn-add {
  width: 25px;
  height: 25px;
  border-color: darkcyan;
  border-radius: 15px;
  vertical-align: middle;
  line-height: 5px;
  outline: none;
}

.order-item-btn-sub {
  width: 25px;
  height: 25px;
  border-color: coral;
  border-radius: 15px;
  vertical-align: middle;
  line-height: 5px;
  outline: none;
}

.order-list-item {
  height: 45px;
  font-size: 18px;
}

.selling-footer {
  height: 5vh;
  width: 100vw;
  background-color: #1ec2a4;
}

.goods-info {
  height: 75vh;
  width: 58vw;
  background-color: #495163;
}

/*.sum-goods-box {*/
/*  overflow-y: auto;*/
/*  height: 75vh;*/
/*}*/
.order-list-body {
  overflow-y: auto;
  height: 67.5vh;
  display: block;
}

/* 滚动条宽度 */
::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

.type-list {
  overflow-y: auto;
}

.type-list-item {
  width: 25%;
  display: inline-block;
  text-align: center;
  font-size: 20px;
  line-height: 22px;
  font-weight: bold;
  padding: 5px;
}

.type-list-item-img {
  width: 100%;
  height: 100%;
}

.order-btn {
  height: 95%;
  width: 20%;
  margin: 2px 19px;
  font-size: 28px;
  font-weight: 600;
}

.full-type-list {
  height: 88%;
}

.tree-type-list {
  height: 83%;
}

.tool-bar {
  width: 58vw;
  height: 5%;
  background: white;
}

.tool-bar-item {
  float: left;
}

.back-btn {
  height: 100%;
}

.type-name {

}

.goods-research {
  float: right;
}
</style>